<template>
  <div class="enroll-container">
    <div class="enroll-header">
      <h2>请登记社团相关信息</h2>
    </div>
    <!-- 社团基本信息 -->
    <div class="enroll-container">
      <div class="enroll-container-header">一、填写社团基本信息</div>
      <div class="enroll-content">
        <el-form :model="communityRuleForm" status-icon label-width="200px" class="demo-ruleForm">
          <!-- 社团名称 -->
          <el-form-item label="社团名称" prop="name">
            <el-input v-model="communityRuleForm.name" type="text" autocomplete="off"></el-input>
          </el-form-item>

          <!-- 社团头像 -->
          <el-form-item label="社团头像" prop="head">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="true"
              :http-request="uploadImage"
            >
              <img
                v-if="AssociationHead"
                :src="AssociationHead"
                alt="加载失败"
                :lazy="true"
                class="AssociationHead"
              />
              <el-icon v-else class="avatar-uploader-icon">
                <plus />
              </el-icon>
            </el-upload>
          </el-form-item>

          <!-- 社团类别 -->
          <el-form-item label="社团类别" prop="associationType">
            <el-select
              :teleported="false"
              v-model="communityRuleForm.associationType"
              class="m-2 text-posi"
              placeholder="请选择社团类别"
            >
              <el-option
                v-for="item in communityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 指导老师 -->
          <el-form-item label="指导老师" prop="teacherName">
            <el-input v-model="communityRuleForm.teacherName" type="text" autocomplete="off"></el-input>
          </el-form-item>

          <!-- 社团照片墙 -->
          <el-form-item label="社团照片墙" prop="photoWall">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :http-request="handlePic"
            >
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img :src="dialogImageUrl" alt="加载失败" :lazy="true" />
            </el-dialog>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 负责人信息 -->
    <div class="enroll-container">
      <div class="enroll-container-header">二、填写负责人信息</div>
      <div class="enroll-content">
        <el-form
          :model="communityRuleForm"
          status-icon
          :rules="responRules"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="学生负责人" prop="associationStudentName">
            <el-input
              v-model="communityRuleForm.associationStudentName"
              type="text"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人学号" prop="associationStudentNumber">
            <el-input
              v-model="communityRuleForm.associationStudentNumber"
              type="text"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人手机号" prop="associationStudentPhone">
            <el-input
              v-model="communityRuleForm.associationStudentPhone"
              type="text"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人邮箱" prop="associationRegisterEmail">
            <el-input
              v-model="communityRuleForm.associationRegisterEmail"
              type="text"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 招新信息 -->
    <div class="enroll-container">
      <div class="enroll-container-header">三、填写招新信息</div>
      <div class="enroll-content">
        <el-form :model="communityRuleForm" status-icon label-width="200px" class="demo-ruleForm">
          <el-form-item label="招新推文链接" prop="link">
            <el-input v-model="communityRuleForm.link" type="text" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="面试轮数" prop="interviewNum">
            <el-select
              v-model="communityRuleForm.interviewNum"
              :teleported="false"
              class="m-2 text-posi"
              placeholder="请选择面试轮数"
            >
              <el-option
                v-for="item in interviewNumOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="咨询群二维码" prop="QRCode">
            <el-upload
              class="avatar-uploader-group"
              action="#"
              :http-request="uploadQRCode"
              :show-file-list="false"
            >
              <img v-if="QRCodeImg" :src="QRCodeImg" alt="加载失败" :lazy="true" class="avatar QRCode" />
              <el-icon v-else class="avatar-uploader-icon">
                <plus />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="社团简介" prop="associationIntroduction" class="el-whole-item">
            <el-input
              v-model="communityRuleForm.associationIntroduction"
              type="textarea"
              autocomplete="off"
              resize="none"
            ></el-input>
          </el-form-item>
          <el-form-item label="社团活动" prop="associationActivity" class="el-whole-item">
            <el-input
              v-model="communityRuleForm.associationActivity"
              type="textarea"
              autocomplete="off"
              resize="none"
            ></el-input>
          </el-form-item>
          <el-form-item label="社团理念" prop="associationIdea" class="el-whole-item">
            <el-input
              v-model="communityRuleForm.associationIdea"
              type="textarea"
              autocomplete="off"
              resize="none"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <button class="enroll-button" v-debounce="{ fn: preserve }">保存</button>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
// import type { ElForm } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import UpdateRequest from '../api/UpdateRequest';
import GetInfo from '@/api/GetInfo';
import UploadImgFile from '../api/UploadImgFile'
import type { UploadFile, UploadUserFile } from 'element-plus/es/components/upload/src/upload.type'
import { userRequest } from '@/api/UserRequest';


const dialogImageUrl = ref('')
const dialogVisible = ref(false)
let fileList = ref<UploadUserFile[]>([])
//使用 hashSet
// const picFileList = new Map();

//删除照片
const handleRemove = (file: UploadFile) => {
  //删除 fileList 中的对象（通过uid查找）
  //通知后台删除照片（传要删除的照片的id（数组））
  // UpLoadData.append('id',file.name);
  const DelData = new FormData();
  const aid = sessionStorage.getItem('assId');
  if (aid) {
    DelData.append('aid', aid);
  }
  DelData.append('id', file.uid.toString())
  UpdateRequest.UpLoad(DelData).then(response => {
    fileList.value = [];
    for (let i = 0; i < response.length; i++) {
      fileList.value.push({
        url: 'http://175.178.51.126' + response[i].photoPath,
        uid: response[i].id,
      })
    }


    //map方法
    // for(let i=0;i<response.length;i++){
    //   picFileList.add({
    //     url:'http://175.178.51.126' + response[i].photoPath,
    //     uid:response[i].id,
    //   });
    // }
    // fileList.value.push(picFileList)


  })
}

//点击照片墙里面的照片时
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true;
}
const aid = sessionStorage.getItem('assId');
const UpLoadData = new FormData();
if (aid) {
  UpLoadData.append('aid', aid);
}
const handlePic = (event: any) => {
  UpLoadData.append('file', event.file);

  //上传照片
  const upload = UpdateRequest.UpLoad(UpLoadData).then((response) => {
    fileList.value = []
    UpLoadData.delete('file');
    for (let i = 0; i < response.length; i++) {
      fileList.value.push({
        url: 'http://175.178.51.126' + response[i].photoPath,
        uid: response[i].id,
      })
    }
  })



  //map方法
  // const upload=UpdateRequest.UpLoad(UpLoadData).then((response)=>{
  //     UpLoadData.delete('file');
  //     for(let i=0;i<response.length;i++){
  //       picFileList.add({
  //         url:'http://175.178.51.126' + response[i].photoPath,
  //         uid:response[i].id,
  //       });
  //     }
  //     fileList.value.push(picFileList)
  //   })
}




// 获取社团相关信息

const assId = sessionStorage.getItem('assId');
if (assId) {

  //获取社团相关信息

  userRequest.getUserInfo().then(response => {

    Object.keys(response.association).forEach(key => {

      communityRuleForm[key] = response.association[key];
    })
    AssociationHead.value = 'http://175.178.51.126' + response.association.associationHead;
    QRCodeImg.value = 'http://175.178.51.126' + response.association.qrCode;
  })

  //获取照片墙信息

  GetInfo.selectPhotoWall(parseInt(assId)).then(response => {

    fileList.value = [];
    for (let i = 0; i < response.length; i++) {
      fileList.value.push({
        url: 'http://175.178.51.126' + response[i].photoPath,
        uid: response[i].id,
      })
    }
  })
}

//社团基本信息

const communityRuleForm = reactive({
  id: -1,
  name: '',//社团名称
  associationStudentName: '',//社团负责人名称
  associationStudentPhone: '',//社团负责人手机号
  associationStudentNumber: '',//学号
  associationRegisterEmail: '',//负责人邮箱
  teacherName: '',//教师名称
  teacherPhone: '',//教师手机号
  associationIntroduction: '',//社团介绍
  associationType: '',//社团类型
  associationActivity: '',//社团活动
  associationIdea: '',//社团理念
  departments: [],//要注册的部门的数组集合
  link: '',//招新推文链接
  stallTime: '',//摆摊时间
  stallLocation: '',//摆摊地点
  interviewNum: 0,//面试轮数
  interviewNow: 0,//当前轮数

})

//社团头像
const AssociationHead = ref('')

//上传社团头像
const uploadImage = (params: any) => {
  const formData = new FormData();
  const id = sessionStorage.getItem('assId');
  formData.append('head', params.file);
  if (id) {
    formData.append('id', id);
  }
  UploadImgFile.uploadAssociationHead(formData).then(response => {
    AssociationHead.value = 'http://175.178.51.126/' + response;
  })
}

//咨询群二维码
const QRCodeImg = ref('');

//上传咨询群二维码
const uploadQRCode = (params: any) => {
  const formData = new FormData();
  const id = sessionStorage.getItem('assId');
  formData.append('QRCode', params.file);
  if (id) {
    formData.append('id', id);
  }
  UploadImgFile.uploadQRCode(formData).then(response => {
    QRCodeImg.value = 'http://175.178.51.126/' + response;
  })
}

//社团类别
// const associationType = ref('')
const communityOptions = [
  {
    value: '兴趣社团',
    label: '兴趣社团'
  },
  {
    value: '工作社团',
    label: '工作社团'
  },
]

//面试轮数
// const interviewNum = ref(0);
const interviewNumOptions = [0, 1, 2, 3, 4, 5, 6];

//负责人信息


//负责人学号
const stuNumber = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入负责人学号'))
  }

  setTimeout(() => {
    if (parseInt(value) < value * 1) {
      callback(new Error('请输入整数'))
    } else {
      if (value.length != 10) {
        callback(new Error('学号应该为10位数'))
      } else {
        callback()
      }
    }
  }, 1000)
}
//负责人手机号码

const regMobile = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
const stuPhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入负责人手机号'))
  }

  setTimeout(() => {
    if (!regMobile.test(value)) {
      callback(new Error('请输入正确的手机号'))
    }
  }, 1000)
}
//负责人邮箱
const regEmail = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
const stuEmail = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入邮箱'))
  }
  setTimeout(() => {
    if (!regEmail.test(value)) {
      callback(new Error('请输入正确的邮箱号码'))
    }
  }, 1000)
}
const responRules = reactive({
  associationStudentNumber: [{ validator: stuNumber, trigger: 'blur' }],
  associationStudentPhone: [{ validator: stuPhone, trigger: 'blur' }],
  associationRegisterEmail: [{ validator: stuEmail, trigger: 'blur' }],
})



//保存信息
const preserve = () => {
  UpdateRequest.UpdateAssociation(communityRuleForm)
}
</script>

<style lang="scss" >
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
    "t-fontBlue": #20608c,
  //字体颜色--蓝
    "t-grey": #8a8888,
  //字体常用颜色--灰
    "t-white": #f5f5f5,
  //字体常用颜色--白
    "border": #707070 //边框颜色
);
// 信息登记页面

.enroll-container {
  position: relative;
  top: 0;
  left: 0;
  font-size: 1.5625rem;
  padding-bottom: 2rem;
  input,
  textarea {
    border: 1px solid map-get($map: $colors, $key: border);
  }
  .enroll-content-basic-input,
  .enroll-content-intro,
  .enroll-content-pic {
    margin-top: 2.4375rem;
  }
  input {
    width: 21rem;
    height: 2.0625rem;
  }
  textarea {
    width: 61.4375rem;
    height: 12.5625rem;
  }
  .enroll-header {
    h2 {
      font-size: 2.8125rem;
      text-align: center;
      color: map-get($map: $colors, $key: t-grey);
    }
  }
  .enroll-container-header {
    margin-top: 30px;
    margin-bottom: 35px;
    font-weight: 700;
    color: map-get($map: $colors, $key: t-fontBlue);
  }
  //内容
  .enroll-content {
    .avatar {
      width: 70px;
      height: 70px;
      display: block;
    }
    .AssociationHead {
      width: 70px !important;
      height: 70px !important;
      display: block;
    }
    .el-form {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .el-form-item {
        width: 50%;
        text-align: center;
        margin-bottom: 35px;
        flex-grow: 3;
        .el-form-item__label {
          vertical-align: baseline;
        }
      }
      .el-whole-item {
        width: 100%;
      }
      .el-dialog__body {
        img {
          width: 100%;
        }
      }
    }
    .el-input__inner {
      width: 336px;
      font-size: 18px;
    }
    .el-textarea__inner {
      font-size: 18px;
    }
    .el-form-item__label,
    input {
      font-size: 1.5625rem;
    }
    //头像模块
    .avatar-uploader .el-upload {
      border: 1px dashed #707070;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader {
      .el-icon.avatar-uploader-icon {
        font-size: 25px;
        color: #8c939d;
        width: 70px;
        height: 70px;
        text-align: center;
      }
      .QRCode {
        width: 70px;
        height: 70px;
        text-align: center;
      }
    }

    .avatar {
      width: 50px;
      height: 50px;
      display: block;
    }
    //群二维码
    .avatar-uploader-group {
      .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
      }
    }
    .avatar-uploader-group .el-upload:hover,
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar {
      width: 178px !important;
      height: 178px !important;
      display: block;
    }
  }

  //社团照片墙
  .el-carousel__item h3 {
    color: pink;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: pink;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: pink;
  }

  .enroll-button {
    position: absolute;
    right: 0;
    bottom: -1rem;
    width: 6.25rem;
    height: 2.5rem;
    margin: 2rem 0;
    text-align: center;
    cursor: pointer;
    background-color: #ffffff;
    color: map-get($map: $colors, $key: t-grey);
    font-size: 1.5625rem;
    border-radius: 3.125rem;
    border: 1px solid map-get($map: $colors, $key: border);
    &:hover {
      color: map-get($map: $colors, $key: t-blue);
    }
  }
  .enroll-success {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(245, 245, 245);
    z-index: 10;
    .enroll-success-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 12.5rem;
      height: 9.375rem;
      background-color: #fff;
      font-size: 1.5625rem;
      color: map-get($map: $colors, $key: t-grey);
      border: 1px solid map-get($map: $colors, $key: border);
    }
  }
  .text-posi {
    text-align: start;
  }
}
</style>
